import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import PageRender from '@/components/PageRender';
import SearchRender from '@/components/SearchRender';
import Table from '@/components/Table';
import ATag from '@/components/ATag';
import { queryList, deleteFn } from '@/pages/DarkPleaseCloseYourEyes/services';

const breadcrumb = [
  {
    label: '游戏',
  },
  {
    label: '天黑请闭眼',
  },
];

const DarkPleaseCloseYourEyes = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);

  // 列表刷新
  const refresh = () => {
    setLoading(true);
    return new Promise((res) => {
      setTimeout(() => {
        setList(queryList());
        setLoading(false);
        res(null);
      }, 600);
    });
  };

  const columns = [
    {
      title: '游戏名',
      dataIndex: 'gameName',
      key: 'gameName',
      width: 150,
    },
    {
      title: '模式',
      key: 'modeType',
      dataIndex: 'modeType',
      width: 120,
    },

    {
      title: '参与人员',
      key: 'participantsList',
      dataIndex: 'participantsList',
      width: 300,
      render(_: string[]) {
        return <>{_?.join('、')}</>;
      },
    },
    {
      title: '主持人',
      dataIndex: 'hostName',
      key: 'hostName',
      width: 120,
    },
    {
      title: '开始时间',
      key: 'startTime',
      dataIndex: 'startTime',
      width: 120,
    },
    {
      title: '游戏时长',
      dataIndex: 'duration',
      key: 'duration',
      width: 120,
      render(_: number) {
        return <>{_ + '分'}</>;
      },
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
      width: 120,
      render: (_: undefined, record: any) => (
        <div>
          <ATag
            style={{ marginRight: '10px' }}
            onClick={() => {
              // 跳转表单页
              history.push({
                pathname: 'dark-please-close-your-eyes/form',
                query: {
                  type: 'look',
                  id: record.id,
                },
              });
            }}
          >
            详情
          </ATag>
          <ATag
            onClick={() => {
              Modal.confirm({
                title: '是否确认删除游戏记录?',
                icon: <ExclamationCircleOutlined />,
                content:
                  '此操作会改变游戏记录状态,不会真正删除,查询的时候过滤删除态',
                async onOk() {
                  // 删除
                  deleteFn(record.id);
                  // 刷新列表
                  await refresh();
                },
              });
            }}
          >
            删除
          </ATag>
        </div>
      ),
    },
  ];

  useEffect(() => {
    refresh();
  }, []);

  return (
    <PageRender list={breadcrumb} title="列表查询" loading={loading}>
      <SearchRender
        action={() => {
          // 跳转表单页
          history.push({
            pathname: 'dark-please-close-your-eyes/form',
            query: {
              type: 'add',
            },
          });
        }}
      />
      <Table columns={columns} list={list}></Table>
    </PageRender>
  );
};

export default DarkPleaseCloseYourEyes;
